<template>
<div class="com-left-bottom pr fc">
  <div class="corner lt"></div>
  <div class="corner rt"></div>
  <div class="corner rb"></div>
  <div class="corner lb"></div>
  <div class="title fajc">全市各级学校确诊人数占比</div>
  <div class="chart f1" ref="chart"></div>
</div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'com-left-bottom',
  props: ['chartData'],
  data () {
    return {
      chart: null
    }
  },
  methods: {
    setOption () {
      // const data = this.chartData.filter((v, i) => i < 7)
      const randomData = () => {
        const list = []
        for (let i = 0; i < 12; i++) {
          list.push(Math.ceil(Math.random() * 500))
        }
        return list
      }

      this.chart.setOption({
        color: ['#06FFFE', '#228FFE', '#D844CA', '#25E78C', '#E7A626'],
        textStyle: {
          fontFamily: 'PingFangSC-Regular'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: 10,
          borderRadius: 8,
          textStyle: {
            fontSize: 28
          }
          // formatter ([params]) {
          //   const date = params.axisValueLabel.split('/')
          //   return `${date[0]}月${date[1]}日<br>${params.value} (100%)`
          // }
        },
        legend: {
          orient: 'vertical',
          right: 150,
          top: 'center',
          itemGap: 26,
          icon: 'rect',
          itemWidth: 22,
          itemHeight: 22,
          textStyle: {
            color: 'rgba(255, 255, 255, .8)',
            fontSize: 24,
            padding: [5, 5, 5, 20]
          }
        },
        grid: {
          left: '40px',
          right: '730px',
          top: '50px',
          bottom: '16px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .1)',
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8AA6DB',
            fontSize: 28,
            margin: 6
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: ['rgba(255, 255, 255, .1)'],
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8AA6DB',
            fontSize: 28,
            margin: 28
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .1)',
              width: 3
            }
          }
        },
        series: [
          {
            name: '幼儿园',
            type: 'bar',
            barWidth: 20,
            barGap: 0,
            data: randomData()
          },
          {
            name: '小学',
            type: 'bar',
            barWidth: 20,
            barGap: 0,
            data: randomData()
          },
          {
            name: '初中',
            type: 'bar',
            barWidth: 20,
            barGap: 0,
            data: randomData()
          },
          {
            name: '高中',
            type: 'line',
            symbolSize: 24,
            lineStyle: {
              width: 6
            },
            data: randomData()
          },
          {
            name: '大学',
            type: 'line',
            symbolSize: 24,
            lineStyle: {
              width: 6
            },
            data: randomData()
          },
          {
            name: '每日各班级确诊占比',
            type: 'pie',
            radius: [98, 122],
            center: [1667, '50%'],
            data: [
              { name: '幼儿园', value: 25 },
              { name: '小学', value: 25 },
              { name: '初中', value: 25 },
              { name: '高中', value: 25 },
              { name: '大学', value: 25 },
            ],
            label: {
              show: false,
              position: 'center',
              fontSize: 40,
              precision: 0,
              formatter (params) {
                console.log(params)
                return `{perVal|${params.percent.toFixed(0)}}{per|%}\n{text|${params.name}}`
              },
              rich: {
                perVal: {
                  fontSize: 60,
                  fontWeight: 'bold'
                },
                per: {
                  fontSize: 40,
                  verticalAlign: 'bottom'
                },
                text: {
                  fontSize: 28,
                  color: '#fff',
                  verticalAlign: 'bottom',
                  height: 38
                }
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      })
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.setOption()
    console.log(this.chart)
  },
  watch: {
    chartData () {
      this.setOption()
    }
  }
}
</script>

<style lang="less">
.com-left-bottom {background-color: rgba(16, 38, 38, 0.7);grid-column-start: span 2;
  .corner {position: absolute;width: 20px;height: 20px;border: 2px solid #1AFFF8;
    &.lt {border-right: 0;border-bottom: 0;left: 0;top: 0;}
    &.rt {border-left: 0;border-bottom: 0;right: 0;top: 0;}
    &.rb {border-left: 0;border-top: 0;right: 0;bottom: 0;}
    &.lb {border-right: 0;border-top: 0;left: 0;bottom: 0;}
  }
  .title {width: 100%; height: 90px;padding-bottom: 2px;font: 500 40px PingFangSC-Medium;color: #FFFFFF;background: url("../../../../assets/imgCity/header_bottom_line.png") center bottom/534px 2px no-repeat;}
  .dot {display:inline-block;margin-right:10px;border-radius:20px;width:20px;height:20px;}
}
</style>
